<template>
    <div>
        <p style="text-align:center;margin-top: 20px;">今日{{location}}天气{{cond_txt}}</p>
        <div id="main" style="width: 500px;height: 500px;margin:0 auto"></div>

    </div>
</template>

<script>
    import request from '../../utils/request'


    export default {
        name: "News",
        data() {
            return {
                //    天气
                tmp: 0,
                result: '',
                location: '',
                cond_txt: ''
            }
        },
        mounted() {
            this.$nextTick(() => {
                request.get("/tripartite/weather").then(res => {
                    console.log(res)
                    this.result = res.HeWeather6[0]
                    this.location = res.HeWeather6[0].basic.location
                    this.cond_txt = res.HeWeather6[0].now.cond_txt

                    var myChart = this.$echarts.init(document.getElementById('main'))

                    var option = {
                        series: [
                            {
                                type: 'gauge',
                                center: ['50%', '60%'],
                                startAngle: 200,
                                endAngle: -20,
                                min: 0,
                                max: 60,
                                splitNumber: 12,
                                itemStyle: {
                                    color: '#FFAB91'
                                },
                                progress: {
                                    show: true,
                                    width: 30
                                },
                                pointer: {
                                    show: false
                                },
                                axisLine: {
                                    lineStyle: {
                                        width: 30
                                    }
                                },
                                axisTick: {
                                    distance: -45,
                                    splitNumber: 5,
                                    lineStyle: {
                                        width: 2,
                                        color: '#999'
                                    }
                                },
                                splitLine: {
                                    distance: -52,
                                    length: 14,
                                    lineStyle: {
                                        width: 3,
                                        color: '#999'
                                    }
                                },
                                axisLabel: {
                                    distance: -20,
                                    color: '#999',
                                    fontSize: 20
                                },
                                anchor: {
                                    show: false
                                },
                                title: {
                                    show: false
                                },
                                detail: {
                                    valueAnimation: true,
                                    width: '60%',
                                    lineHeight: 40,
                                    borderRadius: 8,
                                    offsetCenter: [0, '-15%'],
                                    fontSize: 60,
                                    fontWeight: 'bolder',
                                    formatter: '{value} °C',
                                    color: 'auto'
                                },
                                data: [
                                    {
                                        value: 11
                                    }
                                ]
                            },

                        ]
                    };

                    option.series[0].data[0].value = this.result.now.tmp
                    myChart.setOption(option);
                })
            })


        }
    }
</script>

<style scoped>

</style>
